<template>
    <!--        头部-->
    <header>
        <div class="logo">
            <img alt="" :src="handleChange">
        </div>

        <div class="user">
            <img class="avatar" :src="user.info.head" alt="">
            <span class="username">
                    {{ user.info.name }}
                </span>
            <div class="arrow">

            </div>
            <div class="label">
                {{ user.getChineseIdentity }}
            </div>
        </div>
    </header>
</template>

<script setup>
import {useUserStore} from "@/stores/user";
import {SERIES} from "@/assets/server";

const user = useUserStore()
const handleChange = computed(()=>{
    const val = `LOGO-${SERIES}`
    return new URL(`/src/assets/login/${val}.png`, import.meta.url)
})
</script>

<style scoped lang="less">
header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 1%;
    height: 5vh;

    .logo {
        height: 75%;

        img {
            height: 100%;
        }
    }

    .user {
        display: flex;
        align-items: center;
        justify-content: space-around;
        height: 75%;
        width: 15vw;

        .avatar {
            background-color: white;
            border-radius: 50%;
            height: 80%;
        }

        .username {
            font-size: 14px;
            color: #676E7A;
        }

        .arrow {
            width: 12px;
            height: 8px;
            background: url("@/assets/header/多边形 1.png");
        }

        .label {
            font-size: 12px;
            text-align: center;
            line-height: 26px;
            width: 94px;
            height: 26px;
            background: url("@/assets/header/矩形 3.png");
            color: #676E7A ;
        }
    }
}
</style>